<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: Canvas Tweening Example</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
	<script type="text/javascript" src="../lib/tweenjs-NEXT.combined.js"></script>
	<script type="text/javascript" src="../src/tweenjs/plugins/ColorPlugin.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	function init() {
		// set up our stage:
		stage = new createjs.Stage("canvas1");
		stage.autoClear = false;

		var star = new createjs.Shape();
		var fillCmd = star.graphics.beginFill("#FF0000").command;
		star.graphics.drawPolyStar(0, 0, 300, 12, 0.85);
		star.x = stage.canvas.width/2;
		star.y = stage.canvas.height/2;

		stage.addChild(star);
		
		// install the sample plugin:
		createjs.ColorPlugin.install();

		// set up a tween that tweens the color of the fill:
		createjs.Tween.get(fillCmd, {loop:-1, bounce:true})
			.to({style:"#00FF00"}, 1000) // supports 6 digit hex colors
			.to({style:"#00F"}, 1000) // 3 digit hex colors
			.to({style:"rgb(255,128,0)"}, 1000) // rgb and rgba colors
			.to({style:"hsl(295, 100%, 50%)"}, 1000) // hsl & hsla colors
			.to({style:"rgb(0%,100%,100%)"}, 1000) // and percentage based rgb / rgba
			
		// and just for fun, lets make it spin and scale:
		// comment this out if you want to focus on the color shifts.
		createjs.Tween.get(star, {loop:-1, bounce:true}).to({alpha:0.3, scaleX:0.2, scaleY:0.2}).to({rotation:360, scaleX:3, scaleY:3}, 3300, createjs.Ease.quadInOut);

		createjs.Ticker.timingMode = createjs.Ticker.RAF;
		createjs.Ticker.addEventListener("tick", stage);
	}
</script>
</head>

<body onload="init();">

<header class="TweenJS">
	<h1>ColorPlugin Example</h1>

	<p>This example demonstrates the ColorPlugin, which lets you tween almost any valid CSS color values.</p>
</header>

<canvas id="canvas1" width="960" height="350"></canvas>
<br/>
<input type="button" value="toggle paused"
	   onclick="createjs.Ticker.paused = !createjs.Ticker.paused;">
</body>
</html>
